<template>
  <div>
    <div v-if="this.$route.name == 'medicinalgoneEdition'" class="app-container">
      <vue-element-loading
        :active="this.$store.state.elementloading.vueElementLoading"
        spinner="spinner"
        color="#FF6700"
      />
      <el-card shadow="never">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="searchMap"
          style="margin-top: 20px;margin-left: 0px"
        >
          <el-form-item prop="companyName">
            <el-input @keyup.enter.native="fetchData" v-model.lazy="searchMap.gName">
              <template slot="prepend">原料去向</template>
            </el-input>
          </el-form-item>
          <el-button @click="fetchData" icon="el-icon-search"></el-button>
        </el-form>

        <template>
          <el-table
            :data="list"
            max-height="500"
            border
            style="width: 100%"
            @row-click="chooseone"
            highlight-current-row
            @current-change="handleSelectionChange"
          >
            <el-table-column width="55">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row.id">
                  <span class="el-radio__label"></span>
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="gName" label="原料去向"></el-table-column>
            <el-table-column prop="gMedicinalGoneSale" label="销量（Kg/年）"></el-table-column>
            <el-table-column prop="gMedicinalGoneProportion" label="占总产量比例（%）"></el-table-column>
            <el-table-column prop="gMedicinalGonePrice" label="价格" align="center"></el-table-column>
          </el-table>
        </template>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,20,30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </div>
    <router-view />
  </div>
</template>

<script>
import medicinalgoneEditionApi from "@/api/medicinalgoneEdition";
import VueElementLoading from "vue-element-loading";
export default {
  components: {
    VueElementLoading
  },
  data() {
    return {
      searchMap: {
        medicinalId: "",
        productbaseId: "",
        gName: "",
        page: "",
        size: "",
        eTime: ""
      },
      list: [],
      total: 0, //总记录数
      currentPage: 1, //当前页码
      pageSize: 5, //每页显示10条数据
      radio: null, // 如果使用单选框，定义一个model值
      currentSelectItem: {} //当前选中的值
    };
  },

  created() {
    this.fetchData();
  },

  watch: {
    // 监听相同路由下参数变化的时候，从而实现异步刷新
    // 实时监听路由变化是因为在AppMain中去除了include，页面被缓存，不能自动刷新
    $route(to, from) {
      // 做一些路由变化的响应
      this.fetchData();
    }
  },
  methods: {
    chooseone(row) {
      // console.log("当前行：",row)
      this.radio = row.id;
      this.backup = this.pojo = row;
    },
    handleSelectionChange(row) {
      console.log(row);
      this.currentSelectItem = row;
    },
    // 当每页显示条数改变后，被触发，val是最新的显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.fetchData();
    },
    // 当页码改变后，被触发，val是最新的页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.fetchData();
    },
    searchcompany() {
      this.currentPage = 1;
      this.fetchData();
    },
    // 根据原料去向查询
    fetchData() {
      var vm = this.$store;
      vm.commit("updateLoading", true);
      console.log(
        "是否开启加载",
        this.$store.state.elementloading.vueElementLoading
      );
      this.searchMap.medicinalId = localStorage.getItem("tMedicinalEditionId");
      this.searchMap.productbaseId = localStorage.getItem(
        "tProductBaseEditionId"
      );
      this.searchMap.page = this.currentPage;
      this.searchMap.size = this.pageSize;
      this.searchMap.eTime = localStorage.getItem("eTime");
      medicinalgoneEditionApi.select(this.searchMap).then(resp => {
        this.list = resp.data.rows;
        this.total = resp.data.total;
        if (resp.data.rows) {
          vm.commit("updateLoading", false);
          console.log(
            "是否开启加载",
            this.$store.state.elementloading.vueElementLoading
          );
        }
        console.log("原料去向", resp.data.rows);
      });
    }
  }
};
</script>

<style lang="css" >
.el-dialog {
  max-height: calc(100% - 200px);
  /* max-height: 600px; */
  display: flex;
  flex-direction: column;
}
.el-dialog__body {
  overflow: auto;
}
</style>

<style lang="css" scoped>
.el-radio__label {
  display: none;
}
/* body .el-table th.gutter {
  display: table-cell !important;
} */
/* .el-table >>> th {
  background-color: #eee;
} */
.el-table >>> td {
  font-size: 13px;
}
</style>